<template>
  <div class="home">
    <div class="container">
      <backLast @backLast="back" />

      <div class="fruitInfo">
        <div class="leftBox">
          <div class="bigImg">
            <!-- <img
              src="../../assets/img/tao.png"
              alt=""
            > -->
            <pic-zoom
              :url="imgSrc"
              :scale="2"
            />
          </div>
          <div class="smallImg">
            <img
              src="../../assets/img/left_arrow.png"
              alt=""
              class="moveImg"
              @click="leftScroll"
            >
            <div class="smBox">
              <ul
                :style="{ left: left }"
                class="smImgList"
              >
                <li
                  v-for="(item, index) in goodsInfo.lsAlbums"
                  :key="item.id"
                  :class="{ active: selectedImgIndex == index }"
                  @mouseover="setActive(index)"
                >
                  <img
                    :src="item.cFolder"
                    alt=""
                  >
                </li>
              </ul>
            </div>
            <img
              src="../../assets/img/right_arrow.png"
              alt=""
              class="moveImg"
              @click="rightScroll"
            >
          </div>
        </div>
        <div class="rightBox">
          <div class="toper">
            <div class="titles">
              {{ goodsInfo.cName }}
            </div>
            <div class="opreate">
              <div @click="focus(goodsInfo)">
                <img
                  :src="goodsInfo.isChecked ? guanzhu : notguanzhu"
                  alt=""
                >
                关注
              </div>
              <div
                v-clipboard:copy="message"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              >
                <img
                  src="../../assets/img/fenxiang.png"
                  alt=""
                >
                分享
              </div>
            </div>
          </div>
          <div
            v-if="goodsInfo.productPreferential == undefined"
            :class="
              goodsInfo.groupBuying !== undefined?'priceBox_Bg': 
              WithPackageStatus === true? 'priceBox_Bg': 
              SinglePromotionStatus === true? 'priceBox_Bg':
              goodsInfo.promotion !== undefined?'priceBox_Bg':
              GiftpreFerentialStatus === true? 'priceBox_Bg':
              FixedSetMenuStatus === true? 'priceBox_Bg':
              CombinaTionSales === true? 'priceBox_Bg':
              'priceBox'
            "
          >
            <!-- 团购活动 -->
            <div
              v-if="goodsInfo.groupBuying !== undefined" 
              class="body"
            >
              <div class="active_name">
                {{ goodsInfo.groupBuying.name }}
              </div>
              <div class="active_titem">
                距结束
                <DetailtimeDown 
                  :start="goodsInfo.groupBuying.startTime" 
                  :end="goodsInfo.groupBuying.endTime" 
                />
              </div>
            </div>
            <!-- 团购活动END -->

            <!-- 秒杀活动 -->
            <div
              v-if="goodsInfo.promotion !== undefined" 
              class="body"
            >
              <div class="active_name">
                {{ goodsInfo.promotion.sDesName }}
              </div>
              <div class="active_titem">
                距结束
                <DetailtimeDown 
                  :start="goodsInfo.promotion.pStartDate" 
                  :end="goodsInfo.promotion.pEndDate" 
                />
              </div>
            </div>
            <!-- 秒杀活动END -->

            <!-- 搭配销售/搭配套餐 -->
            <div
              v-if="WithPackageStatus === true" 
              class="body"
            >
              <div class="active_name">
                {{ WithPackageList[0].name }}
              </div>
              <div class="active_titem" />
            </div>
            <!--搭配销售/搭配套餐END -->

            <!-- 整单促销 -->
            <div
              v-if="SinglePromotionStatus === true" 
              class="body"
            >
              <div class="active_name">
                {{ SinglePromotionList[0].pricePreferentialName }}
              </div>
              <div class="active_titem" />
            </div>
            <!-- 整单促销END -->

            <!-- 买赠活动 -->
            <div
              v-if="GiftpreFerentialStatus === true" 
              class="body"
            >
              <div class="active_name">
                {{ GiftpreFerentialList[0].giftPreferentialName }}
              </div>
              <div class="active_titem" />
            </div>
            <!-- 买赠活动END -->

            <!-- 固定销售/固定套餐 -->
            <div
              v-if="FixedSetMenuStatus === true" 
              class="body"
            >
              <div class="active_name">
                {{ FixedSetMenuList[0].name }}
              </div>
              <div class="active_titem" />
            </div>
            <!--固定销售/固定套餐END -->
            <!-- 选配套餐 -->
            <div
              v-if="CombinaTionSales === true" 
              class="body"
            >
              <div class="active_name">
                {{ goodsInfo.combinationSales[0].name }}
              </div>
              <div class="active_titem" />
            </div>
            <!-- 选配套餐END -->
            <div class="top">
              <div class="price">
                <span>¥</span>
                {{ goodsInfo.fSalePrice }} 
                <span class="fMarkPrice">¥{{ goodsInfo.fMarkPrice }}</span>
                <span
                  v-if="goodsInfo.productAttribute == 2"
                  class="socre"
                >+{{ goodsInfo.salePoints.toFixed(2) }}积分</span>
              </div>
              <div class="lInventoryCount">
                仅剩{{ goodsInfo.lInventoryCount }}{{ goodsInfo.stockUnit_name }}
              </div>
            </div>
          </div>
          <div class="hr" />
          <!-- 数量 -->
          <div class="nums">
            <div class="tips">
              数量
            </div>
            <div class="numsGroup">
              <div
                class="lbtns"
                @click="reduceNums"
              >
                -
              </div>
              <input
                v-model="nums"
                class="numbers"
                @change="numsChange"
              >
              <div
                class="rbtns"
                @click="addNums"
              >
                +
              </div>
            </div>
          </div>
          <!-- 数量END -->
          <!-- 规格 -->
          <div v-if="goodsInfo.lsProductSkus.length > 1">
            <div class="promotion_box">
              <div 
                class="un_anbox"
                style="display: flex;justify-content: left"  
              >
                <div class="title">
                  {{ goodsInfo.lsProductSkus[0].centerValuesNotExists.freeidx1_Name }}
                </div>
                <div 
                  class="un_anbody"
                  style=" display: flex;flex-direction: row; margin-left: 1rem;"
                >
                  <div 
                    v-for="(sku,skuindex) in goodsInfo.lsProductSkus"
                    :key="skuindex"
                    class="un_anbody_item"
                    style="flex-direction: row;"
                  >
                    <span 
                      class="active_span_sku"
                      :class="skuindex === SkuTabIndex?'skuactive':''"
                      @click="SkuTabClick(skuindex, sku)"
                    >{{ sku.centerValuesNotExists.freex1 }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 规格END -->
          <!-- 促销及整单促销 -->
          <div v-if="goodsInfo.preferentialMap !== undefined">
            <!-- 促销 -->
            <div 
              v-if="!SinglePromotionStatus"
              class="promotion_box"
            >
              <div 
                v-if="!PackageActivityStatus"
                class="un_anbox"
              >
                <div class="title">
                  促销
                </div>
                <div class="un_anbody">
                  <div v-if="goodsInfo.preferentialMap.postlistMap.length !== 0">
                    <div 
                      v-for="(item,index) in goodsInfo.preferentialMap.postlistMap"
                      :key="index"
                      class="un_anbody_item"
                    >
                      <span class="active_span">包邮活动</span>
                      <span>{{ item.postActivityName }}</span>
                    </div>
                  </div>
                  <div v-else>
                    <div 
                      v-for="(item,index) in goodsInfo.preferentialMap.postPartProductList"
                      :key="index"
                      class="un_anbody_item"
                    >
                      <span class="active_span">包邮活动</span>
                      <span>{{ item.DeliveryType }}</span>
                    </div>
                  </div>
                </div>
                <div 
                  class="an_butotn"
                  @click="PackageActivity"
                >
                  展开>>
                </div>
              </div>
              <div 
                v-else
                class="un_anbox"
              >
                <div class="title">
                  促销
                </div>
                <div class="un_anbody">
                  <div 
                    v-for="(item,index) in goodsInfo.preferentialMap.postlistMap"
                    :key="index"
                    class="un_anbody_item"
                  >
                    <span class="active_span">包邮活动</span>
                    <span>{{ item.postActivityName }}</span>
                  </div>

                  <div 
                    v-for="(item,index) in goodsInfo.preferentialMap.giftpreferentialList"
                    :key="index"
                    class="an_anbody_item"
                  >
                    <div class="top">
                      <span class="active_span">{{ item.iGiftType }}</span>
                      <span class="active_title">{{ item.giftPreferentialName }}</span>
                      <span class="active_timer">截至日期：{{ item.endDate }}</span>
                    </div>
                    <div class="list">
                      <div
                        v-for="(item2,index2) in item.giftpreferentialItemList"
                        :key="index2" 
                        class="list_itme"
                      >
                        <div 
                          v-for="(i,j) in item2.giftPreferentialItem"
                          :key="j"
                          class="item"
                        >
                          <span class="zanw" />
                          {{ i.description }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div 
                  class="an_butotn"
                  @click="PackageActivity"
                >
                  收起>>
                </div>
              </div>
            </div>
            <!-- 促销END -->
            <div 
              v-else
              class="promotion_box"
            >
              <div 
                v-if="!PackageActivityStatus"
                class="un_anbox"
              >
                <div class="title">
                  促销
                </div>
                <div class="un_anbody">
                  <div 
                    v-for="(item,index) in goodsInfo.preferentialMap.postlistMap"
                    :key="index"
                    class="un_anbody_item"
                  >
                    <span class="active_span">包邮活动</span>
                    <span>{{ item.postActivityName }}</span>
                  </div>
                  <div 
                    v-for="(singleitem,singleindex) in SinglePromotionList"
                    :key="singleindex"
                    class="un_anbody_item"
                  >
                    <span class="active_span">{{ singleitem.pricePreferentialName }}</span>
                    <span 
                      v-for="(i,j) in singleitem.pricePreferentialItemList"
                      :key="j"
                    >
                      满{{ i.consumerSpending }},且满{{ i.consumerPieces }}件，打{{ i.discountNum }}折
                    </span>
                  </div>
                </div>
                <div 
                  class="an_butotn"
                  @click="PackageActivity"
                >
                  展开>>
                </div>
              </div>
              <div 
                v-else
                class="un_anbox"
              >
                <div class="title">
                  促销
                </div>
                <div class="un_anbody">
                  <div 
                    v-for="(item,index) in goodsInfo.preferentialMap.postlistMap"
                    :key="index"
                    class="un_anbody_item"
                  >
                    <span class="active_span">包邮活动</span>
                    <span>{{ item.postActivityName }}</span>
                  </div>
                  <div 
                    v-for="(item,index) in goodsInfo.preferentialMap.giftpreferentialList"
                    :key="index"
                    class="an_anbody_item"
                  >
                    <div class="top">
                      <span class="active_span">{{ item.iGiftType }}</span>
                      <span class="active_title">{{ item.giftPreferentialName }}</span>
                      <span class="active_timer">截至日期：{{ item.endDate }}</span>
                    </div>
                    <div class="list">
                      <div
                        v-for="(item2,index2) in item.giftpreferentialItemList"
                        :key="index2" 
                        class="list_itme"
                      >
                        <div 
                          v-for="(i,j) in item2.giftPreferentialItem"
                          :key="j"
                          class="item"
                        >
                          <span class="zanw" />
                          {{ i.description }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <div 
                    v-for="(a,b) in SinglePromotionList"
                    :key="b"
                    class="un_anbody_item"
                  >
                    <span class="active_span">{{ a.pricePreferentialName }}</span>
                    <span 
                      v-for="(i,j) in a.pricePreferentialItemList"
                      :key="j"
                    >
                      满{{ i.consumerSpending }},且满{{ i.consumerPieces }}件，打{{ i.discountNum }}折 
                      <span
                        v-for="(c,d) in SinglePromotionList"
                        :key="d"
                        class="active_timer"
                        style="margin-left: 1rem"
                      >截至日期：{{ c.endDate }}</span>
                    </span>
                  </div>
                </div>
                <div 
                  class="an_butotn"
                  @click="PackageActivity"
                >
                  收起>>
                </div>
              </div>
            </div>
            <!-- 整单促销 -->
          </div>
          <!-- 促销及整单促销END -->
          <!-- 团购 -->
          <div
            v-if="goodsInfo.groupBuying !== undefined"
            class="promotion_box"
          >
            <div class="un_anbox">
              <div class="title">
                团购
              </div>
              <div class="un_anbody">
                <div class="un_anbody_item">
                  <span class="active_span">{{ goodsInfo.groupBuying.name }}</span>
                  <span>{{ goodsInfo.groupBuying.totalLimitQuantity }}{{ goodsInfo.unit_name }}成团</span>
                </div>
              </div>
              <div class="an_butotn" />
            </div>
            <div class="progress_box">
              <el-progress
                :percentage="((goodsInfo.groupBuying.groupBuyingRate / goodsInfo.lInventoryCount) * 100).toFixed(0)"
                color="#fb4e7d"
              />             
            </div>
          </div>
          <!-- 团购END -->
          <!-- 加入购物车 -->
          <div
            v-if="CombinaTionSales === false" 
            class="btnGroup"
          >
            <div
              class="joinCart"
              @click="addCart"
            >
              加入购物车
            </div>
            <div
              class="buy"
              @click="nowBuy"
            >
              立即购买
            </div>
          </div>

          <div
            v-else 
            class="btnGroup"
          >
            <div
              class="buy"
            >
            <!-- @click="returnTop" -->
              <!-- <a 
                href="#CombinaTionSales_box"
                style="width: 29.19rem;display: flex;text-align: center;justify-content: center;"
              > -->
                选配套餐
              <!-- </a> -->
            </div>
          </div>
          <!-- 加入购物车END -->
          <div class="goosTips">
            <div>·温馨提示：不支持7天无理由退货</div>
            <div>·由INJA商城发货，并提供售后服务</div>
          </div>
        </div>
      </div>
      <!-- 搭配套餐选项  -->
      <div
        v-show="WithPackageStatus" 
        id="WithPackage_box"
      >
        <div class="topp_box">
          <span>搭配套餐</span>
        </div>
        <el-tabs 
          v-model="WithPackageName" 
          type="card" 
          @tab-click="WithPackagHandleClick"
        >
          <el-tab-pane
            v-for="(withItem, withIndex) in WithPackageList"
            :key="withIndex" 
            :label="withItem.name" 
            :name="(Number(withIndex) + 1)"
            class="topp_body"
          >
            <div class="list_box">
              <div class="detail_good_box">
                <el-image
                  class="detail_good_box_img"
                  :src="goodsInfo.fullDefaultImageUrl"
                  fit="cover" 
                  @click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)"
                />
                <div class="detail_good_box_name">
                  {{ goodsInfo.cName }}
                </div>
              </div>
              <el-checkbox-group 
                v-model="CombinCheckList" 
                fill="red"
                class="checkbox-group"
                @change="CheckListChange"
              >
                <div
                  v-for="(combin, combinIndex) in withItem.combinProducts"
                  :key="combinIndex" 
                  class="topp_body_item"
                >
                  <div class="plus_sign">
                    +
                  </div>
                  <div class="topp_body_item_body">
                    <el-image
                      class="topp_body_img"
                      :src="combin.productPicUrl"
                      fit="cover" 
                      @click="LocckGoodsShow(combin.productId, combin.iShopId)"
                    />
                    <div class="topp_body_name">
                      {{ combin.productName }}
                    </div>
                    
                    <div class="topp_body_price">
                      <el-checkbox 
                        :key="combin.productId"  
                        :label="combin"
                      >
                        <span>¥{{ combin.newPrice }}</span>
                      </el-checkbox>
                    </div>
                  </div>
                </div>
              </el-checkbox-group>
              <div class="plus_sign">
                =
              </div>
              <div class="topp_body_item_settlement">
                <div class="topp_body_item_settlement_1">
                  已经选择了{{ CombinNum }}个配件
                </div>
                <div class="topp_body_item_settlement_2">
                  搭配价：¥{{ WithPackagePrice }}
                </div>
                <div class="topp_body_item_settlement_4">
                  <span>节省：¥{{ WithPackagePrice2 }}</span>
                </div>
                <div class="topp_body_item_settlement_3">
                  <span @click="CombinAddCart(withItem.id)">加入购物车</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 搭配套餐选项END  -->

      <!-- 固定套餐选项  -->
      <div
        v-show="FixedSetMenuStatus" 
        id="WithPackage_box"
      >
        <div class="topp_box">
          <span>固定套餐</span>
        </div>
        <el-tabs 
          v-model="activeName" 
          type="card" 
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="(fixedItem, fixedIndex) in FixedSetMenuList"
            :key="fixedItem.id" 
            :label="fixedItem.name" 
            :name="`${(Number(fixedIndex) + 1)}`"
            class="topp_body"
          >
            <div class="list_box">
              <div class="detail_good_box">
                <el-image
                  class="detail_good_box_img"
                  :src="fixedItem.combinProducts[0].productPicUrl"
                  fit="cover" 
                  @click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)"
                />
                <div class="detail_good_box_name">
                  {{ fixedItem.combinProducts[0].productName }}
                </div>
                <div class="detail_good_box_price">
                  <span>¥{{ fixedItem.combinProducts[0].FavorablePrice }}</span>
                </div>
              </div>
              <div
                v-for="(fixcombin, fixcombinIndex) in fixedItem.combinProducts.slice(1)"
                :key="fixcombinIndex" 
                class="topp_body_item"
              >
                <div class="plus_sign">
                  +
                </div>
                <div class="topp_body_item_body">
                  <el-image
                    class="topp_body_img"
                    :src="fixcombin.productPicUrl"
                    fit="cover" 
                    @click="LocckGoodsShow(fixcombin.productId, fixcombin.iShopId)"
                  />
                  <div class="topp_body_name">
                    {{ fixcombin.productName }}
                  </div>
                  
                  <div class="topp_body_price">
                    <span>¥{{ fixcombin.FavorablePrice }}</span>
                  </div>
                </div>
              </div>
              <div class="plus_sign">
                =
              </div>
              <div class="topp_body_item_settlement">
                <div class="topp_body_item_settlement_2">
                  搭配价：¥{{ FavorablePrice }}
                </div>
                <div class="topp_body_item_settlement_4">
                  <span>节省：¥{{ FavorablePrice2 }}</span>
                </div>
                <div class="topp_body_item_settlement_3">
                  <span @click="FixedAddCart(fixedItem.combinProducts)">加入购物车</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 固定套餐选项END  -->

      <!-- 选配套餐选项  -->
      <div
        v-if="CombinaTionSales === true" 
        id="CombinaTionSales_box"
      >
        <div class="topp_box">
          <span>选配套餐</span>
        </div>
        <el-tabs 
          v-model="combinaActive" 
          type="card" 
          @tab-click="CombinaHandleClick($event, goodsInfo.combinationSales[0].combinationSalesStrategy)"
        >
          <el-tab-pane
            v-for="(CombinaItem, combinaIndex) in goodsInfo.combinationSales[0].combinationSalesStrategy"
            :key="combinaIndex" 
            :label="CombinaItem.strategyItemName" 
            :name="`${(Number(combinaIndex) + 1)}`"
            class="topp_body"
          >
            <div class="list_box">
              <div class="detail_good_box">
                <el-image
                  class="detail_good_box_img"
                  :src="goodsInfo.fullDefaultImageUrl"
                  fit="cover" 
                  @click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)"
                />
                <div class="detail_good_box_name">
                  {{ goodsInfo.cName }}
                </div>
                <div class="detail_good_box_price">
                  <span>¥{{ goodsInfo.fSalePrice }}</span>
                </div>
              </div>
              <el-checkbox-group 
                v-model="ComCheckList" 
                fill="red"
                class="checkbox-group"
                @change="ComListChange($event)"
              >
                <div
                  v-for="(Com, ComIndex) in CombinaItem.combinationsalesItem"
                  :key="ComIndex" 
                  class="topp_body_item"
                >
                  <div class="plus_sign" />
                  <div class="topp_body_item_body">
                    <el-image
                      class="topp_body_img"
                      :src="Com.productPicUrl"
                      fit="cover" 
                      @click="LocckGoodsShow(Com.productId, Com.iShopId)"
                    />
                    <div class="topp_body_name">
                      {{ Com.productName }}
                    </div>
                    
                    <div class="topp_body_price">
                      <el-checkbox 
                        :key="ComIndex"  
                        :label="Com"
                        :disabled="Com.SelectionState === true"
                      >
                        <span>¥{{ Com.price }}</span>
                      </el-checkbox>  
                    </div>
                   
                    <div class="topp_body_num">
                      <el-input-number 
                        v-model="Com.nums" 
                        :max="CombinaItem.count" 
                        :min="1"
                        :step-strictly="true"
                        size="mini"
                        :disabled="Com.NumsState === true"
                        @change="handleChange($event, combinaActive, ComIndex)"
                      />
                    </div>
                  </div> 
                </div>
              </el-checkbox-group>
            </div>
          </el-tab-pane>
          <div
            class="topp_box"
            style="margin-bottom:0"
          >
            <span>已选商品</span>
          </div>
          <div class="activ_leist_box">
            <div class="detail_good_box">
              <el-image
                class="detail_good_box_img"
                :src="goodsInfo.fullDefaultImageUrl"
                fit="cover" 
                @click="LocckGoodsShow(goodsInfo.id, goodsInfo.iShopId)"
              />
              <div class="detail_good_box_name">
                {{ goodsInfo.cName }}
              </div>
              <div class="detail_good_box_price">
                <span>¥{{ goodsInfo.fSalePrice }}</span>
              </div>
            </div>
            <div
              v-for="(lis, LiIndex) in CombinaActiveList"
              :key="LiIndex"
              class="consetrbox" 
            >
              <div
                v-for="(i, j) in lis.data"
                :key="j" 
                class="topp_body_item"
              >
                <div class="plus_sign">
                  +
                </div>
                <div class="topp_body_item_body">
                  <el-badge 
                    :value="num(i.nums, i)" 
                    :max="100"
                    class="item"
                  >
                    <el-image
                      class="topp_body_img"
                      :src="i.productPicUrl"
                      fit="cover" 
                      @click="LocckGoodsShow(i.productId, i.iShopId)"
                    />
                  </el-badge>
                  <div class="topp_body_name">
                    {{ i.productName }}
                  </div>
                  
                  <div class="topp_body_price">
                    <span>¥{{ i.price }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div
              v-show="CombinaActiveList.length != 0" 
              class="plus_sign"
            >
              =
            </div>
            <div
              v-show="CombinaActiveList.length != 0" 
              class="topp_body_item_settlement"
            >
              <div class="topp_body_item_settlement_2">
                <el-input-number 
                  v-model="NumberData"  
                  :min="1"
                  :step-strictly="true"
                  size="mini"
                  @change="CombinaSetChange"
                />
              </div>
              <div class="topp_body_item_settlement_3">
                <span @click="CombinaSetBy">立即购买</span>
              </div>
              <div class="topp_body_item_settlement_3">
                <span @click="CombinaSetAddCart">加入购物车</span>
              </div>
            </div>
          </div>
        </el-tabs>
      </div>
      <!-- 选配套餐选项END  -->
    </div>
    <Carousel
      ref="CarouselRefs"
      :carousel-data="goodsInfo"
      @getNewDetail="getNewDetail"
    />
    <DetailType 
      ref="DetailTypeRefs"
      :detail-type="goodsInfo" 
    />
    <FoucsSuccess
      :visiable="isVisiable"
      @changeVisiabled="changeVisiabled"
    />
    <div
      class="shop"
      @click="link"
    >
      <img
        src="../../assets/img/shop.png"
        alt=""
      >
      客服
    </div>
    <!-- <ShareModal
      :visiable="isVisiableShare"
      @changeVisiabledShare="changeVisiabledShare"
    /> -->
  </div>
</template>

<script>
	import Carousel from '../../components/common/Carousel.vue';
	import DetailType from '../../components/common/detailType.vue';
	import backLast from '../../components/common/backLast.vue'
	import FoucsSuccess from '../../components/common/focusSuccess.vue'
	import PicZoom from 'vue-piczoom'
	import guanzhu  from '../../assets/img/zan_selected.png'
	import notguanzhu  from '../../assets/img/guanzhu.png'
  import DetailtimeDown from '../../components/shopindex/DetailtimeDown'
	export default {
		components: {
			Carousel,
			DetailType,
			backLast,
			PicZoom,
			FoucsSuccess,
      DetailtimeDown
			// ShareModal
		},
		data() {
			return {
				notguanzhu:notguanzhu,
				guanzhu:guanzhu,
				smImgList: [],
				skuInfo: [],
				nums: 1,
				selectedImgIndex: 0,
				imgSrc: '',
				isVisiable: false,
				isVisiableShare: false,
				id: "",
        iShopId: '',
				goodsInfo: {},
				skuItem: "",
				letfs: 0,
				left: 0,
				countDownList: '00天00时00分00秒',
				morenSalePrice: 0,
				message: location.href,
				product:[],
        ActiveType: '', // 页面类别 3 促销，
				FavorList: [], // 关注列表（查询该商品是否被关注）
        PackageActivityStatus: false, // 包邮活动展开状态 
        WithPackageList: [], // 搭配套餐
        SinglePromotionStatus: false, // 整单促销/促销状态， false 促销 true 整单促销
        SinglePromotionList: [], // 整单促销列表
        GiftpreFerentialStatus: false, // 买赠活动
        GiftpreFerentialList: [], // 买赠活动列表
        WithPackageStatus: false, // 是否有搭配套餐
        FixedSetMenuStatus: false, // 是否有固定套餐
        FixedSetMenuList: [], // 固定套餐列表
        GetFixedDetailList: [], // 选择固定套餐列表
        ComCheckList:[], // 选择选配列表
        CombinCheckList: [], // 选择的商品(搭配套餐)、搭配套餐列表
        CombinGetGoodDetailList: [], // 选择的商品详情（搭配套餐）
        CombinNum: 0,
        SkuTabIndex: 0, // 选配角标
        getEMSString: '', // 选配id存放
        activeName: '1', // 固定套餐默认选择
        FavorablePrice: 0, // 固定套餐价格
        FavorablePrice2:0, // 固定套餐节省价格
        WithPackageName: '1', // 搭配套餐默认选择
        WithPackagePrice: 0, // 搭配套餐价格
        WithPackagePrice2: 0, // 搭配套餐节省价格
        CombinaTionSales: false, // 选配状态
        combinaActive: '1', // 选配套餐默认选择
        CombinaActiveList: [], // 选配套餐选择数组
        CombinaNumList: [], // 选配套餐计数器数组
        combinationSalesStrategyLst: [], // 选配tab每块数据
        RemainingNum: 0, // 每个tab剩余数量
        NumberData: 1,
			};
		},
    computed: {
      num() {
        return function(RemainingNum) {
          return RemainingNum
        }
      }
    },
		mounted() {
			this.id = this.$route.query.id;
      this.iShopId = this.$route.query.iShopId
      console.log('this.id', this.id, this.iShopId)
			this.getGoodDetail()
      // 搭配套餐
      this.GetCombinSaleListListData(this.$route.query.id, this.$route.query.iShopId)
      // 固定套餐
      this.GetFixedSetMenuListData(this.$route.query.id, this.$route.query.iShopId)
		},
		methods: {
      // 固定套餐选项
      handleClick(tab) {
        console.log('固定套餐选项',tab, tab.index, Number(tab.index))
        this.activeName = String(Number(tab.index) + 1)
        if (this.activeName === 0) {
          this.SmGDPrice(this.FixedSetMenuList, 1)
        } else {
          this.SmGDPrice(this.FixedSetMenuList, this.activeName)
        }
      },
      // 搭配套餐选项
      WithPackagHandleClick(tab){
        console.log('搭配套餐选项',tab, tab.index, Number(tab.index))
        this.WithPackageName = String(Number(tab.index) + 1)
        this.CombinCheckList = [] // 选择的商品(搭配套餐)、搭配套餐列表
        this.CombinGetGoodDetailList = [], // 选择的商品详情（搭配套餐）
        this.WithPackagePrice = 0
        this.WithPackagePrice2 = 0
        this.CombinNum = 0
      },
      // 选配套餐选项
      CombinaHandleClick(tab, combinationSalesStrategy){
        console.log('选配套餐选项',tab, combinationSalesStrategy)
        this.combinaActive = String(Number(tab.index) + 1) // 选配套餐默认选择
        console.log('this.combinaActive', this.combinaActive)
      },
      // 计算固定套餐价格
      SmGDPrice(FixedSetMenuList,index) {
        let FixedGoods = FixedSetMenuList[index - 1]
        let total = 0 // 优惠价合计
        let PriceTotal = 0 // 未优惠合计
        console.log('FixedGoods', FixedGoods)
        for(let g = 0; g < FixedGoods.combinProducts.length; g++ ) {
          total += FixedGoods.combinProducts[g].FavorablePrice
          PriceTotal += FixedGoods.combinProducts[g].price
        }
        this.FavorablePrice = (((total)*100) /100).toFixed(2)
        this.FavorablePrice2 = (((PriceTotal * 100) - (total * 100)) /100).toFixed(2)
      },
      // 看详情
      LocckGoodsShow(id,iShopId) {
        console.log('看详情',id,iShopId)
        this.$router.push({
          path: "/fruit/detail",
          query: {
            id: id,
            iShopId: iShopId
          },
        })
      },
      // 包邮活动展开状态
      PackageActivity() {
        this.PackageActivityStatus = !this.PackageActivityStatus
      },
			setActive(index){
				this.selectedImgIndex = index
				this.imgSrc = this.goodsInfo.lsAlbums[this.selectedImgIndex].cFolder
			},
      // 搭配套餐选择
      CheckListChange(val) {
        this.CombinNum = val.length // 已经选择了0个配件
        this.CombinCheckList = val
        // 获取搭配商品详情
        let NewGetGoodDetailList = []
        this.CombinCheckList.forEach(Element => {
          let params = {
            token: localStorage.getItem('token'),
            data: {
              id: Element.productId,
              iShopId: Element.iShopId,
            }
          }
          this.$api.good.getGoodDetail(params).then(res => {
            NewGetGoodDetailList.push(res.data)
            this.$set(res.data, 'bIsMain', Element.bIsMain)
            this.CombinGetGoodDetailList = NewGetGoodDetailList
            console.log('搭配套餐选择', this.CombinGetGoodDetailList)
          }) 
        })
        this.SmDPPrice()
      },
      // 选配选择
      ComListChange(e) {
        console.log('选配选择', e,"当前tab页", this.combinaActive, 'tab数据', this.combinationSalesStrategyLst)
        // 将选选择的数据根据Tabindex进行分组
        this.ComCheckList = e
        let arr = e
        let map = {}
        let DESRT = []
        for(var i = 0; i < arr.length; i++){
          let ai = arr[i];
          if(!map[ai.TabIndex]){
            DESRT.push({
                TabIndex: ai.TabIndex,
                data: [ai],
            });
            map[ai.TabIndex] = ai;
          }else{
            for(var j = 0; j < DESRT.length; j++){
                var dj = DESRT[j];
                if(dj.TabIndex == ai.TabIndex){
                    dj.data.push(ai);
                    break;
                }
            }
          }
        }
        this.CombinaActiveList = DESRT
        if(DESRT[Number(this.combinaActive)- 1]) {
          // 如果每个选配商品数量或1个tab页选择的数量等于CombinaItem.count规定数量，则相反的选择和数量计数器禁用
          if(DESRT[Number(this.combinaActive)- 1].TabIndex === this.combinaActive) {
            if(this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].count === DESRT[Number(this.combinaActive)- 1].data.length) {
              console.log(`我选${this.combinaActive}完了`)
              let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem
              let arr2 = DESRT[Number(this.combinaActive)- 1].data
              let output = arr1.filter(item => !arr2.includes(item))
              // 开启所选商品计数器
              DESRT.forEach(NumsItem => {
                NumsItem.data.forEach(NumsI => {
                  this.$set(NumsI,'NumsState', true)
                })
              })
              output.forEach(Element => {
                this.$set(Element, 'SelectionState', true)
                
              })
            } else {
              let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem
              let arr2 = DESRT[Number(this.combinaActive)- 1].data
              let output = arr1.filter(item => !arr2.includes(item))
              // console.log('vava',DESRT, output, arr2)
              // 不满足选择条件，将未选择的商品选择重新打开
              console.log(`我${this.combinaActive}未选完`, DESRT, output, arr2)
              // 所选商品数量求和
              let elenum = 0
              DESRT.forEach(NumsItem => {
                NumsItem.data.forEach(NumsI => {
                  elenum += NumsI.nums
                  this.$set(NumsI,'NumsState', false)
                  this.$set(NumsItem, 'elenum', elenum)
                  this.$set(NumsItem, 'remNum', Number(this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].count) - (elenum-1))
                })
              })
              if(this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].count === DESRT[Number(this.combinaActive)- 1].elenum) {
                let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem
                let arr2 = DESRT[Number(this.combinaActive)- 1].data
                let output = arr1.filter(item => !arr2.includes(item))
                // 开启所选商品计数器
                DESRT.forEach(NumsItem => {
                  NumsItem.data.forEach(NumsI => {
                    this.$set(NumsI,'NumsState', true)
                  })
                })
                output.forEach(Element => {
                  this.$set(Element, 'SelectionState', true)
                })
              } else {
                output.forEach(Element => {
                  this.$set(Element, 'SelectionState', false)
                  this.$set(Element, 'NumsState', true)
                  this.$set(Element,'nums', 1)
                })
                return false
              }
              output.forEach(Element => {
                this.$set(Element, 'SelectionState', false)
                this.$set(Element, 'NumsState', true)
                this.$set(Element,'nums', 1)
              })
            }
          } else {
            this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem.forEach(Element =>{
              this.$set(Element,'NumsState', true)
              this.$set(Element,'nums', 1)
              this.$set(Element,'SelectionState', false)
            })
            return false
          }
        } else {
          this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem.forEach(Element =>{
            this.$set(Element,'NumsState', true)
            this.$set(Element,'nums', 1)
            this.$set(Element,'SelectionState', false)
          })
          return false
        }
        
      },
      // 选配计数器
      handleChange(currentValue,combinaActive) {
        console.log('acurrentValue, oldValue', currentValue)
        console.log('this.ComCheckList', this.ComCheckList, combinaActive)
        let arr = this.ComCheckList
        let map = {}
        let DESRT = []
        for(var i = 0; i < arr.length; i++){
          let ai = arr[i];
          if(!map[ai.TabIndex]){
            DESRT.push({
                TabIndex: ai.TabIndex,
                data: [ai],
            });
            map[ai.TabIndex] = ai;
          }else{
            for(var j = 0; j < DESRT.length; j++){
                var dj = DESRT[j];
                if(dj.TabIndex == ai.TabIndex){
                    dj.data.push(ai);
                    break;
                }
            }
          }
        }
        console.log('handleChange', DESRT)
        this.CombinaActiveList = DESRT
        if(DESRT[Number(combinaActive)- 1]) {
          let xlType = DESRT.filter(function (obj) {
            return obj.TabIndex === combinaActive
          })
          // console.log('1111', xlType)
          xlType.forEach(Element =>{
            let elenum = 0
            Element.data.forEach(i => {
              elenum += i.nums
            })
            this.$set(Element, 'elenum', elenum)
          })
          // 如果每个选配商品数量或1个tab页选择的数量等于CombinaItem.count规定数量，则相反的选择和数量计数器禁用
          if(DESRT[Number(this.combinaActive)- 1].TabIndex === this.combinaActive) {
            // console.log('as111', DESRT[Number(this.combinaActive)- 1])
            if(this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].count === DESRT[Number(this.combinaActive)- 1].elenum){
              console.log(`我选${this.combinaActive}完了`)
              let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem
              let arr2 = DESRT[Number(this.combinaActive)- 1].data
              let output = arr1.filter(item => !arr2.includes(item))
              console.log('我在这1', arr2)
              arr2.forEach(arrItem => {
                this.$set(arrItem, 'NumsState', true)
              })
              output.forEach(Element => {
                this.$set(Element, 'SelectionState', true)
              })
            } else {
              console.log(`我${this.combinaActive}未选完`)
              let arr1 = this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem
              let arr2 = DESRT[Number(this.combinaActive)- 1].data
              let output = arr1.filter(item => !arr2.includes(item))
              console.log('我在这2', output)
              output.forEach(Element => {
                this.$set(Element, 'RemainingNum', Number(this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].count) - Number(DESRT[Number(this.combinaActive)- 1].elenum))
                this.$set(Element, 'SelectionState', false)
                this.$set(Element, 'NumsState', true)
                this.$set(Element,'nums', 1)
              })

            }
          } else {
            console.log('222', DESRT[Number(this.combinaActive)- 1])
          }
        } else {
          this.combinationSalesStrategyLst[Number(this.combinaActive)- 1].combinationsalesItem.forEach(Element =>{
            this.$set(Element,'NumsState', true)
            this.$set(Element,'nums', 1)
            this.$set(Element,'SelectionState', false)
          })
          return false
        }
      },
      // 选配结算计数器
      CombinaSetChange(val) {
        console.log('选配结算计数器', val)
      },
      // 选配立即购买
      CombinaSetBy() {
        console.log('立即购买')
      },
      // 选配加入购物车
      CombinaSetAddCart() {
        console.log('选配加入购物车')
      },
      // // 锚点跳转
      // returnTop() {
      //   document.querySelector("#CombinaTionSales_box").scrollIntoView(true);
      // },
      // 搭配套餐计算价格
      SmDPPrice() {
        let CombinMainProducts = this.goodsInfo.fSalePrice // 主商品价格
        let WithGoods = this.CombinCheckList // 选择的搭配商品
        let total = 0 // 优惠价合计
        let PriceTotal = 0 // 未优惠合计
        if(WithGoods.length === 0) {
          console.log('搭配套餐合计11',CombinMainProducts, WithGoods)
          this.WithPackagePrice = ((total + CombinMainProducts) *100) /100
          this.WithPackagePrice2 = ((PriceTotal * 100) - (total * 100)) /100
        } else {
          for (let i = 0; i < WithGoods.length; i++) {
            total += WithGoods[i].newPrice
            PriceTotal += WithGoods[i].price
          }
          console.log('搭配套餐合计22',total + CombinMainProducts)
          this.WithPackagePrice = ((total + CombinMainProducts) *100) /100
          this.WithPackagePrice2 = ((PriceTotal * 100) - (total * 100)) /100
        }
      },
			getNewDetail(id, iShopId) {
				this.$router.push({
					path: "/fruit/detail",
          query: {
            id: id,
            iShopId: iShopId
          },
				})
				this.id = id
        this.iShopId = iShopId
				this.getGoodDetail()
			},
			// 获取商品详情
			getGoodDetail() {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						id: this.id,
            iShopId: this.iShopId,
					}
				}
				this.$api.good.getGoodDetail(params).then(res => {
					console.log('获取商品详情', JSON.parse(JSON.stringify(res.data)), res.data.combinationSales)
					if (res.code == 200) {
						this.goodsInfo = res.data;
            // 设置默认选中sku
            this.imgSrc = res.data.fullDefaultImageUrl
            this.skuItem = this.goodsInfo.lsProductSkus[0].id; // sku id
            this.morenSalePrice = this.goodsInfo.lsProductSkus[0].fSalePrice;
            this.goodsInfo.cName = this.goodsInfo.lsProductSkus[0].cSKUName;
						this.goodsInfo.fSalePrice = this.goodsInfo.lsProductSkus[0].fSalePrice;
            this.GetlsProductSkus(this.skuItem) // 获取快递方式
            // this.$refs.DetailTypeRefs.DetailTypeData(this.goodsInfo)
            // this.$refs.CarouselRefs.CarouselData(this.goodsInfo)
            console.log('this.goodsInfo', this.goodsInfo)
            if ( this.goodsInfo.preferentialMap !== undefined) {
              // 判断是否是整单促销
              if(this.goodsInfo.preferentialMap.pricepreferentialList.length > 0) {
                console.log('整单促销')
                this.SinglePromotionStatus = true
                this.SinglePromotionList = this.goodsInfo.preferentialMap.pricepreferentialList
              } else {
                console.log('不是整单促销')
                this.SinglePromotionStatus = false
              }
              // 判断是否是买赠活动giftpreferentialList
              if(this.goodsInfo.preferentialMap.giftpreferentialList.length > 0) {
                console.log('是买赠活动')
                this.GiftpreFerentialStatus = true
                this.GiftpreFerentialList = this.goodsInfo.preferentialMap.giftpreferentialList
              } else {
                console.log('不是买赠活动')
                this.GiftpreFerentialStatus = false
              }
              // 判断是否是选配商品
              if(this.goodsInfo.combinationSales === undefined) {
                console.log('不是选配商品')
                this.CombinaTionSales  = false
              } else {
                console.log('是选配商品', res.data.combinationSales[0])
                this.CombinaTionSales  = true
                this.combinationSalesStrategyLst = this.goodsInfo.combinationSales[0].combinationSalesStrategy // tab每块默认数据
                res.data.combinationSales[0].combinationSalesStrategy.forEach((Element,index) =>{
                  Element.combinationsalesItem.forEach(item =>{
                    this.$set(item, 'nums', 1)
                    this.$set(item, 'SelectionState', false)
                    this.$set(item, 'NumsState', true)
                    this.$set(item, 'TabIndex', String(Number(index) + 1))
                  })
                })
              }
            }
						this.getProductFavorites()
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 获取个人收藏列表
			getProductFavorites() {
				let params = {
					token: localStorage.getItem('token'),
					data: {
						classId: '',
						productName: '',
						tagId: '',
						currentPage: 1,
						pagesize: 10000,
					}
				}
				this.$api.person.getProductFavorites(params).then(res => {
					console.log('获取个人收藏列表', res.data)
					this.FavorList = res.data.pager.data
					this.SearchFavorites(this.FavorList, this.goodsInfo)
				})
			},
			// 查询该商品是否被关注
			/**
			 * FavorList 关注列表
			 * goodsInfo 商品信息
			 */
			SearchFavorites(FavorList,goodsInfo) {
				console.log('查询该商品是否被关注', FavorList,JSON.parse(JSON.stringify(goodsInfo)))
				let results = FavorList.map(a => a.pid).indexOf(goodsInfo.id)
				if(results === -1) { // 没有收藏/关注
					this.goodsInfo.isChecked = false
				} else { // 已收藏/关注
					this.goodsInfo.isChecked = true
				}
			},
			//输入数量
			numsChange() {
				console.log(this.nums)
				if (this.nums > this.goodsInfo.lInventoryCount) {
					this.$message.error('商品数量不能超过最多库存')
					this.nums = this.goodsInfo.lInventoryCount
				} else {
					this.nums = 1;
				}
			},
			//添加到购物车
			addCart() {
				let params = {
					token: localStorage.getItem('token'),
					data: [{
						iSKUId: this.skuItem,
						iProductId: this.id,
						onLineOffLine: 0,
						iQuantity: this.nums,
						dlyType: this.getEMSString, // 选配方式
            iShopId: this.iShopId,
					}]
        }
        console.log('params',params)
				this.$api.good.addCarts(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$message.success(res.message)
					} else {
						this.$message.error(res.message)
					}
				})
			},
      // 搭配套餐加入购物车
      CombinAddCart(lPackageId) {
        console.log('搭配套餐加入购物车', this.CombinGetGoodDetailList)
        if(this.CombinCheckList.length === 0) {
          this.addCart()
        } else {
          let ParamsArrData = [{
            iSKUId: this.skuItem,
            iProductId: this.id,
            onLineOffLine: 0,
            iQuantity: 1,
            // dlyType: "EMS",
            lPackageId: lPackageId,
            iPackageNum: 1,
            bIsMain: true,
            iShopId: this.iShopId||null
          }]
          this.CombinGetGoodDetailList.forEach( Element =>{
            ParamsArrData.push({
              iSKUId: Element.lsProductSkus[0].id,
              iProductId: Element.id,
              onLineOffLine: 0,
              iQuantity: 1,
              lPackageId: lPackageId,
              // dlyType: "EMS",
              iPackageNum: 1,
              bIsMain: Element.bIsMain,
              iShopId: this.iShopId||null
            }) 
            console.log('ParamsArrData',ParamsArrData )
          })
          console.log('ParamsArrData222222222222222',ParamsArrData )
          let addcartdata = {
              token: localStorage.getItem('token'),
              data: [ParamsArrData]
          }
          this.$api.good.addCarts(addcartdata).then(res => {
            console.log('搭配套餐加入购物车', res)
            if (res.code == 200) {
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        }
      },
      // 固定套餐加入购物车前数据处理
      FixedAddCart(FixedAddCart) {
        console.log('固定套餐加入购物车', FixedAddCart, this.getEMSString)
        let FixedParamsArrData =[]
        FixedAddCart.forEach(Element =>{
          FixedParamsArrData.push({
            iSKUId: Element.GoodShop.lsProductSkus[0].id,
            iProductId: Element.GoodShop.id,
            onLineOffLine: 0,
            iQuantity: 1,
            dlyType: this.getEMSString,
          })
        }) 
        console.log('FixedParamsArrData',FixedParamsArrData )
        let FixAddCartData = {
          token: localStorage.getItem('token'),
          data: FixedParamsArrData
        }
        this.$api.good.addCarts(FixAddCartData).then(res => {
          console.log('固定套餐加入购物车', res)
          if (res.code == 200) {
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })
      },
			// 关注
			focus(goodsInfo) {
				console.log('关注', goodsInfo)
				if(this.goodsInfo.isChecked) {
					let del = {
						token: localStorage.getItem('token'),
						data: {
							productId: goodsInfo.id
						}
					}
					this.$api.good.delFavoritesByProductId(del).then(res => {
						if (res.code == 200) {
							this.goodsInfo.isChecked = false
							this.getGoodDetail()
							this.$message.success(res.message);
						} else {
              this.$message.error(res.message);
            }
					});
				} else {
					let params = {
						token: localStorage.getItem('token'),
						data: {
							iShopIds: goodsInfo.iShopId,
							ids: goodsInfo.id
						}
					}
					this.$api.good.addToCollect(params).then(res => {
						if (res.code == 200) {
							this.goodsInfo.isChecked = true
							this.getGoodDetail()
							this.isVisiable = true;
							this.$message.success(res.message);
						} else {
              this.$message.success(res.message);
            }
					})
				}
			},
			//分享
			share() {
				this.isVisiableShare = true;
				console.log(this.isVisiableShare)
			},
			//选择sku
			checkSku(child, parent) {
				this.goodsInfo.lsProductSkus.forEach(items => {
					if (items.cSpecIds == child.id) {
						this.skuItem = items;
						this.goodsInfo.cName = items.cSKUName;
						this.goodsInfo.fSalePrice = items.fSalePrice;
						if (this.goodsInfo.productPreferential) {
							this.goodsInfo.productPreferential.dNewPrice = items.fSalePrice;
						}
            this.GetlsProductSkus(this.skuItem) // 获取快递方式
					}

				});
				console.log(parent)
				console.log(child)
				parent.forEach(item => {
					item.isExtend = false;
				})
				this.$set(child, 'isExtend', true);
			},
			//数量
			addNums() {
				console.log(this.goodsInfo.lInventoryCount)
				if (this.goodsInfo.iInventoryQuantity == false) {
					this.nums++;
				} else {
					if (this.nums < this.goodsInfo.lInventoryCount) {
						this.nums++;
					} else {
						this.$message.error('商品数量不能超过最多库存')
					}
				}
			},
			timeFormat(param) {
				return param < 10 ? '0' + param : param;
			},
			countDown(it) {
				var interval = setInterval(() => {
					// 获取当前时间，同时得到活动结束时间数组
					let newTime = new Date().getTime(); // 对结束时间进行处理渲染到页面
					let endTime = new Date(it).getTime();
					let obj = null; // 如果活动未结束，对时间进行处理
					if (endTime - newTime > 0) {
						let time = (endTime - newTime) / 1000; // 获取天、时、分、秒
						let day = parseInt(time / (60 * 60 * 24));
						let hou = parseInt((time % (60 * 60 * 24)) / 3600);
						let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
						let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
						obj = {
							day: this.timeFormat(day),
							hou: this.timeFormat(hou),
							min: this.timeFormat(min),
							sec: this.timeFormat(sec)
						};
					} else {
						// 活动已结束，全部设置为'00'
						obj = {
							day: '00',
							hou: '00',
							min: '00',
							sec: '00'
						};
						clearInterval(interval);
					}
					this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒';
				}, 1000);
			},
			reduceNums() {
				if (this.nums <= 1) {
					this.nums = 1;
				} else {
					this.nums--;
				}
			},
			back(text) {
				this.$router.go(text); //返回上一层
			},
			//小图片鼠标悬浮
			selectedImg(pic, index) {
				this.imgSrc = pic.cFolder;
				this.selectedImgIndex = index;
			},
			changeVisiabled(e) {
				this.isVisiable = e;
			},
			changeVisiabledShare(e) {
				this.isVisiableShare = e;
			},
			//点击向右滑动
			leftScroll() {
				if (this.selectedImgIndex > 0) {
					this.selectedImgIndex--
					this.imgSrc = this.goodsInfo.lsAlbums[this.selectedImgIndex].cFolder
					this.$nextTick(function() {
						this.letfs += 8.81;
						this.left = this.letfs + 'rem';
					})
				}
			},
			rightScroll() {
				if (this.selectedImgIndex < this.goodsInfo.lsAlbums.length - 1) {
					this.selectedImgIndex++
					this.imgSrc = this.goodsInfo.lsAlbums[this.selectedImgIndex].cFolder
					this.$nextTick(function() {
						this.letfs -= 8.81;
						this.left = this.letfs + 'rem';
					})
				}
			},
			nowBuy() {
				let datas = {
					iSKUId: this.skuItem,
					iProductId: this.id,
					onLineOffLine: 0,
					iQuantity: this.nums,
					dlyType: this.getEMSString,
          iShopId: this.iShopId,
				}
				let obj = {
					item: datas
				}
				let params = {
					token: localStorage.getItem("token"),
					data: obj
				}
				this.$api.good.orderNow(params).then(res => {
					console.log(res)
					if (res.code == 200) {
						let cardata = [{
							iSKUId: this.skuItem,
							iProductId: this.id,
							onLineOffLine: 0,
							iQuantity: this.nums,
							dlyType: this.getEMSString,
							id: res.data
						}]
						let subdata = {
							items: cardata,
							realProductAttribute: 1,
							wayOfOrder: 1
						}
						let par = {
							token: localStorage.getItem("token"),
							data: subdata
						}
						this.$api.good.GenerateOrderByShoppingCarts(par).then(resq => {
							if (resq.code == 200) {
								this.$router.push({
									path: '/confirm_order'
								})
							} else {
								this.$message.error(resq.message)
							}
						})

					} else {
						this.$message.error(res.message)
					}
				})

			},
			link() {
				var test = encodeURIComponent(window.location.href);
				var name = encodeURIComponent(this.goodsInfo.cName);
				var image = encodeURIComponent(this.goodsInfo.fullDefaultImageUrl)
				var money = encodeURIComponent(this.goodsInfo.fSalePrice)
				window.open('https://yongyou-c7ca5f-8498.udesk.cn/im_client/?web_plugin_id=125391?product_send=true&product_title=' +
					name + '&product_url=' + test + '&product_image=' + image + '&product_价格=￥' + money)
			},
			onCopy: function(e) {
				console.log(e)
				this.$message.success("地址复制成功!")
			},
			onError: function(e) {
				console.log(e)
				this.$message.error("地址复制失败!")
			},
      // 获取搭配套餐
      GetCombinSaleListListData(productId, iShopId) {
        let params={
          token: localStorage.getItem('token'),
          iShopId: iShopId,
					data: {
            param:{
              productId: productId,
              areaId: null,
            }
					}
        }
        this.$api.good.GetCombinSaleListList(params).then(res => {
          console.log('获取搭配套餐', res)
          // 如果res。data。count大于1则是搭配销售商品
          if(res.data.count > 0) {
            this.WithPackageStatus = true
            this.WithPackageList = res.data.combinSales // 搭配套餐 
          } else {
            this.WithPackageStatus = false
            return false
          }
        })
      },
      // 获取固定套餐
      GetFixedSetMenuListData(productId, iShopId) {
        let params={
          token: localStorage.getItem('token'),
          iShopId: iShopId,
					data: {
            param:{
              productId: productId,
              areaId: null,
            }
					}
        }
        this.$api.good.GetFixedSetMenuListApi(params).then(res => {
          // 如果res。data。count大于1则是搭配销售商品
          if(res.data.count > 0) {
            this.FixedSetMenuStatus = true
            this.FixedSetMenuList = res.data.fixedsetmenu // 固定套餐
            console.log('获取固定套餐', res.data.fixedsetmenu)
            res.data.fixedsetmenu.forEach(Element =>{
              Element.combinProducts.forEach(item =>{
                let params = {
                  token: localStorage.getItem('token'),
                  data: {
                    id: item.productId,
                    iShopId: item.iShopId,
                  }
                }
                this.$api.good.getGoodDetail(params).then(res => {
                  item.GoodShop = res.data
                  // this.$set(item , 'GoodShop', res.data)
                })
              })
            })
            // 计算固定套餐价格
            this.SmGDPrice(this.FixedSetMenuList, this.activeName)
          } else {
            this.FixedSetMenuStatus = false
            return false
          }
        })
      },
      // 选配方式
      SkuTabClick(index,data) {
        console.log('选配方式', index, data)
        this.SkuTabIndex = index
        this.goodsInfo.fSalePrice = data.fSalePrice
        this.skuItem = data.id // 规格id
        this.GetlsProductSkus(this.skuItem) // 获取快递方式 
      },
      // 获取商品配送方式
      GetlsProductSkus(skuItem) {
        let params = {
          token: localStorage.getItem("token"),
          data: {
            iShopId: this.iShopId,
            SKUId:skuItem
          },
        };
        this.$api.good.getEMSList(params).then((res) => {
          console.log("获取商品配送方式", res);
          if(res.data.sku.length>0){
            // this.$set(Element,'oDeliverTypeList', res.data.sku)
            this.getEMSString = res.data.sku[0].id
          }else{
            // this.$set(Element,'oDeliverTypeList', res.data.Store)
            this.getEMSString = res.data.Store[0].id
          }
        });
      }
		}
	};
</script>

<style scoped lang="scss">
.home {
  background-color: #fff;

  .container {
    padding: 0 16.19rem;
    margin: 2.19rem 0 0;
    display: flex;
    flex-direction: column;

    .fruitInfo {
      display: flex;
      flex-direction: row;
      padding-top: 2rem;
      justify-content: space-between;

      .leftBox {
        width: 37.75rem;
        height: auto;
        display: flex;
        flex-direction: column;

        .bigImg {
          margin: 0 0 1.31rem;
          width: 37.75rem;
          height: 37.75rem;
          background: rgba(0, 0, 0, 0.1);
          display: block;
          object-fit: contain;
          display: flex;
          justify-content: center;
          align-items: center;

          img {
            width: 27.88rem;
            height: 27.88rem;
          }
        }

        .smallImg {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          > img {
            background: transparent;
            width: 1.5rem;
            height: 3.25rem;
            cursor: pointer;
          }

          .smBox {
            position: relative;
            width: 27.87rem;
            height: 8.25rem;
            overflow: hidden;

            .smImgList {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              position: absolute;
              left: 0;
              top: 0;
              height: 8.25rem;
              width: 100%;
              transition: all 0.2s ease-in;

              li {
                cursor: pointer;
                height: 7.25rem;
                width: 7.25rem;
                margin-right: 1.56rem;
                // padding: 1rem;
                border: 0.06rem solid #fff;
                align-items: center;
                text-align: center;
                background: rgba(0, 0, 0, 0.1);
                position: relative;

                img {
                  width: 7.25rem;
                  height: 7.25rem;
                }

                &.active {
                  border: 0.06rem solid #32b3a1;
                }
              }
            }
          }
        }
      }

      .rightBox {
        width: 42.06rem;
        height: auto;

        .toper {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          .titles {
            font-size: 1.13rem;
            color: #333;
            line-height: 1.72rem;
            font-weight: bold;
            width: 24.81rem;
          }

          .opreate {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            > div {
              cursor: pointer;
              font-size: 0.88rem;
              color: #666;
              margin-right: 1.88rem;
              user-select: none;

              &:last-child {
                margin-right: 0;
              }

              &:hover {
                color: #32b3a1;
              }

              img {
                vertical-align: middle;
                width: 1rem;
                margin-right: 0.5rem;
              }
            }
          }
        }
        .priceBox_Bg{
          background-color: #fb4e7d;
          margin: 2.19rem 0 0;
          padding: 1.31rem;
          display: flex;
          flex-direction: column;
          color: #fff;
          .top{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 2.5rem;
            align-items: center;
            .price {
              font-size: 1.63rem;

              span {
                font-size: 1.28rem;
              }
              .fMarkPrice{
                font-size: 1rem;
                text-decoration: line-through;
              }
            }
            .lInventoryCount{
              font-size: 1rem;
            }
            .socre {
              font-size: 0.88rem;
              padding-left: 0.94rem;
            }
          }
          .body{
            display: flex;
            height: 2.5rem;
            align-items: center;
            justify-content: space-between;
            .active_titem{
              display: flex;
              height: 2.5rem;
              align-items: center;
            }
          }
        }
        .priceBox {
          background-color: #f6f6f6;
          justify-content: space-between;
          display: flex;
          flex-direction: row;
          margin: 2.19rem 0 0;
          padding: 1.31rem;
          .top{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 2.5rem;
            align-items: center;
            .price {
              font-size: 1.63rem;
              color: #f0406f;

              span {
                font-size: 1.28rem;
                color: #f0406f;
              }
              .fMarkPrice{
                font-size: 1rem;
                color: #d0d0d0;
                text-decoration: line-through;
              }
            }
            .lInventoryCount{
              font-size: 1rem;
              color: #f0406f;
            }

            .socre {
              font-size: 0.88rem;
              color: #666;
              padding-left: 0.94rem;
            }
          }
        }

        .huangou {
          display: flex;
          flex-direction: row;
          margin-top: 1rem;
          align-items: center;
          font-size: 0.88rem;
          color: #999;

          .btns {
            background: #33b39f;
            color: #fff;
            font-size: 0.88rem;
            margin-right: 0.5rem;
            padding: 0.66rem 1.31rem;
          }

          span {
            cursor: pointer;

            &:hover {
              color: #000;
            }
          }
        }

        .priceBoxs {
          width: 42.06rem;
          height: 8.44rem;
          background-color: #f6f6f6;
          margin: 2.19rem 0 0;
          display: flex;
          flex-direction: column;

          // line-height: 4.44rem;
          .prices {
            background-color: #f04070;
            padding: 0.88rem 0.94rem;
            font-size: 1.13rem;
            color: #fff;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .djs {
              font-size: 0.88rem;
              color: #fff;
            }

            // span {
            // 	font-size: 1.28rem;
            // 	color: #f0406f;
            // 	padding-left: 1.31rem;
            // }
          }

          .sales {
            font-size: 1.63rem;
            color: #f0406f;
            line-height: 6rem;
            padding-left: 0.94rem;

            span {
              font-size: 1.28rem;
            }
          }
        }

        .hr {
          width: 42.06rem;
          height: 0.06rem;
          background: rgba(216, 216, 216, 1);
          margin: 1.25rem 0;
        }

        .gem {
          font-size: 0.88rem;
          margin-bottom: 1.25rem;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: flex-start;

          & > div {
            width: 2.81rem;
            padding-right: 1rem;
            line-height: 2.39rem;
            height: 2.39rem;
            white-space: nowrap;
            overflow: hidden;

            text-overflow: ellipsis;
          }

          ul {
            display: block;
            overflow: hidden;
            width: 33.5rem;

            li {
              &:nth-child(4n) {
                margin-right: 0;
              }

              float: left;
              margin-right: 0.69rem;
              margin-bottom: 0.69rem;
              text-align: center;
              line-height: 2.39rem;
              width: 7.81rem;
              height: 2.39rem;
              cursor: pointer;
              color: #666;
              background: rgba(255, 255, 255, 1);
              border: 0.06px solid rgba(205, 205, 205, 1);

              &.active {
                background: rgba(50, 179, 161, 1);
                color: #fff;
              }
            }
          }
        }

        .nums {
          font-size: 0.88rem;
          display: flex;
          flex-direction: row;
          margin-bottom: 1rem;
          .tips {
            width: 1.81rem;
            padding-right: 1rem;
            line-height: 1.75rem;
            height: 1.75rem;
          }

          .numsGroup {
            color: #666;

            width: 12.13rem;
            height: 1.75rem;
            line-height: 1.75rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            user-select: none;

            .rbtns {
              border: 0.06rem solid rgba(210, 210, 210, 1);
              padding: 0 1rem;
              cursor: pointer;
            }

            .lbtns {
              border: 0.06rem solid rgba(210, 210, 210, 1);
              padding: 0 1rem;
              cursor: pointer;
            }

            .numbers {
              border-right: none;
              border-left: none;
              border-top: 0.06rem solid rgba(210, 210, 210, 1);
              border-bottom: 0.06rem solid rgba(210, 210, 210, 1);
              width: 7.2rem;
              text-align: center;
              color: #333;
              font-size: 1rem;
              outline: none;
            }
          }
        }

        .promotion_box  {
          .un_anbox{
            display: flex;
            justify-content: space-between;
            font-size: 0.88rem;
            .title{
              color: #000;
              font-weight: 400;
              display: flex;
              height: 2rem;
              align-items: center;
            }
            .un_anbody{
              display: flex;
              justify-content: left;
              flex-direction: column;
              width: 35.7rem;
              .un_anbody_item{
                display: flex;
                height: 2rem;
                align-items: center;
                margin-bottom: .5em;
                color: #999999;
                .active_span{
                  border: 1px solid #f0406f;
                  padding: .4rem 1rem;
                  margin-right: 1rem;
                  border-radius: .6rem;
                  color: #f0406f;
                }
                .active_span_sku{
                  border: 1px solid #dadfe5;
                  padding: .4rem 1rem;
                  margin-right: 1rem;
                  border-radius: .6rem;
                  color: #666;
                  cursor: pointer;
                }
                .skuactive{
                  border: 1px solid #f0406f;
                  color: #f0406f;
                }
                .active_span2{
                  width: 6rem;
                }
                .active_title{
                  margin-right: 1rem;
                }
              }
              .an_anbody_item{
                display: flex;
                height: 2rem;
                flex-direction: column;
                margin-bottom: .5em;
                color: #999999;
                .top{
                  display: flex;
                  height: 2rem;
                  align-items: center;
                  margin-bottom: .5em;
                  .active_span{
                    border: 1px solid #f0406f;
                    padding: .4rem 1rem;
                    margin-right: 1.5rem;
                    border-radius: .6rem;
                    color: #f0406f;
                  }
                  
                  .active_title{
                    margin-right: 1rem;
                    display: flex;
                    height: 2rem;
                    align-items: center;
                  }
                }
                .list{
                  .list_itme{
                    .item{
                      display: flex;
                      height: 2rem;
                      align-items: center;
                      .zanw{
                        width: 6.5rem;
                      }
                    }
                  }
                }
              }
            }
            .an_butotn{
              color: #f0406f;
              cursor: pointer;
              display: flex;
              height: 2rem;
              align-items: center;
            }
          }
          .progress_box{
            margin: 1rem 0;
          }
        }
        .btnGroup {
          margin-top: 11.8rem;
          width: 29.19rem;

          > div {
            width: 29.19rem;
            cursor: pointer;
            font-size: 1.13rem;
            text-align: center;
            line-height: 3.38rem;
            opacity: 1;

            &.joinCart {
              border: 0.06px solid rgba(4, 4, 4, 1);
              background-color: #fff;
              color: #231815;
              margin-bottom: 1.25rem;
            }

            &.buy {
              border: 0.06px solid rgba(4, 4, 4, 1);
              color: #fff;
              background-color: #000000;
              a{
                color: #fff;
              }
            }

            &:hover {
              opacity: 0.75;
            }
          }
        }

        .goosTips {
          padding-top: 3.38rem;
          color: #999999;
          font-size: 0.88rem;

          > div {
            padding-bottom: 0.69rem;
          }
        }
      }
    }
  }
}

.shop {
  position: fixed;
  right: 3.06rem;
  top: 50%;
  width: 6.25rem;
  height: 2.19rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #000000;
  border: 1px solid #7e8c8d;
  cursor: pointer;

  img {
    width: 1.19rem;
    object-fit: contain;
    margin-right: 0.25rem;
  }
}

#WithPackage_box{
 .topp_box{
   background: #f9fafd;
   display: flex;
   height: 3rem;
   align-items: center;
   padding:0 .8rem;
   color: #f0406f;
   border: 1px solid #e6e6e6;
   margin-bottom: 1rem;
 }
 .topp_body{
   padding:1rem .8rem;
   border-bottom: 1px solid #e6e6e6;
   border-right: 1px solid #e6e6e6;
   border-left: 1px solid #e6e6e6;
   .active_name{
     display: flex;
     height: 2.5rem;
     align-items: center;
     margin-bottom: 1rem;
     span{
      display: flex;
      padding: .8rem 1rem;
      border: .06px solid #040404;
      color: #fff;
      background-color: #000;
     }
   }
   .list_box{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    .detail_good_box{
      display: flex;
      flex-direction: column;
      .el-checkbox-group{
        display: flex;
      }
      .detail_good_box_img{
        width: 10rem;
        height: 10rem;
        cursor: pointer;
      }
      .detail_good_box_name{
        width: 10rem;
        align-items: center;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        justify-content: center;
        font-size: .9rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .detail_good_box_price{
        width: 10rem;
        display: flex;
        align-items: center;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        justify-content: center;
        font-size: .9rem;
        color: #f0406f;
        span{
          margin-left: 1rem;
        }
      }
    }
    .checkbox-group{
      display: flex;
    }
    .topp_body_item{
        display: flex;
      .topp_body_item_body{
        display: flex;
        flex-direction: column;
        .topp_body_img{
          width: 10rem;
          height: 10rem;
          cursor: pointer;
        }
        .topp_body_name{
          width: 10rem;
          align-items: center;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          justify-content: center;
          font-size: .9rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .topp_body_price{
          width: 10rem;
          display: flex;
          align-items: center;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          justify-content: center;
          font-size: .9rem;
          color: #f0406f;
          span{
            margin-left: 1rem;
          }
        }
      }
    }
   }
   .plus_sign{
    display: flex;
    height: 10rem;
    align-items: center;
    font-size: 3rem;
    width: 5rem;
    justify-content: center;
   }
   .topp_body_item_settlement{
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 10rem;
     height: 10rem;
     align-items: center;
     .topp_body_item_settlement_1{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #999;
     }
     .topp_body_item_settlement_2{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #fb4e7d;
     }
     .topp_body_item_settlement_3{
        display: flex;
        height: 2.5rem;
        align-items: center;
        font-size: 1rem;
        span{
          cursor: pointer;
          background:#fb4e7d;
          border-radius: 1rem;
          color: #fff;
          padding: .4rem 1rem;
        }
     }
     .topp_body_item_settlement_4{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #fff;
       span{
        background: #a9a194;
        padding: .2rem 1rem;
       }
     }
   }
 }
}

#CombinaTionSales_box{
 .topp_box{
   background: #f9fafd;
   display: flex;
   height: 3rem;
   align-items: center;
   padding:0 .8rem;
   color: #f0406f;
   border: 1px solid #e6e6e6;
   margin-bottom: 1rem;
 }
 .topp_body{
   padding:1rem .8rem;
   border-bottom: 1px solid #e6e6e6;
   border-right: 1px solid #e6e6e6;
   border-left: 1px solid #e6e6e6;
   .active_name{
     display: flex;
     height: 2.5rem;
     align-items: center;
     margin-bottom: 1rem;
     span{
      display: flex;
      padding: .8rem 1rem;
      border: .06px solid #040404;
      color: #fff;
      background-color: #000;
     }
   }
   .list_box{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    .detail_good_box{
      display: flex;
      flex-direction: column;
      .el-checkbox-group{
        display: flex;
      }
      .detail_good_box_img{
        width: 10rem;
        height: 10rem;
        cursor: pointer;
      }
      .detail_good_box_name{
        width: 10rem;
        align-items: center;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        justify-content: center;
        font-size: .9rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .detail_good_box_price{
        width: 10rem;
        display: flex;
        align-items: center;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        justify-content: center;
        font-size: .9rem;
        color: #f0406f;
        span{
          margin-left: 1rem;
        }
      }
    }
    .checkbox-group{
      display: flex;
    }
    .topp_body_item{
        display: flex;
      .topp_body_item_body{
        display: flex;
        flex-direction: column;
        .topp_body_img{
          width: 10rem;
          height: 10rem;
          cursor: pointer;
        }
        .topp_body_name{
          width: 10rem;
          align-items: center;
          height: 2rem;
          line-height: 3rem;
          text-align: center;
          justify-content: center;
          font-size: .9rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .topp_body_price{
          width: 10rem;
          display: flex;
          align-items: center;
          height: 2rem;
          line-height: 1rem;
          text-align: center;
          justify-content: center;
          font-size: .9rem;
          color: #f0406f;
          span{
            margin-left: 1rem;
          }
        }
        .topp_body_num{
          width: 10rem;
          display: flex;
          align-items: center;
          height: 2rem;
          line-height: 1rem;
          text-align: center;
          justify-content: center;
          font-size: .9rem;
          color: #f0406f;
        }
      }
    }
   }
   .plus_sign{
    display: flex;
    height: 10rem;
    align-items: center;
    font-size: 3rem;
    width: 5rem;
    justify-content: center;
   }
   .topp_body_item_settlement{
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 10rem;
     height: 10rem;
     align-items: center;
     .topp_body_item_settlement_1{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #999;
     }
     .topp_body_item_settlement_2{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #fb4e7d;
     }
     .topp_body_item_settlement_3{
        display: flex;
        height: 2.5rem;
        align-items: center;
        font-size: 1rem;
        span{
          cursor: pointer;
          background:#fb4e7d;
          border-radius: 1rem;
          color: #fff;
          padding: .4rem 1rem;
        }
     }
     .topp_body_item_settlement_4{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #fff;
       span{
        background: #a9a194;
        padding: .2rem 1rem;
       }
     }
   }
 }
 // 已选商品列表
 .activ_leist_box{
   border-left: 1px solid #e6e6e6;
   border-right: 1px solid #e6e6e6;
   border-bottom: 1px solid #e6e6e6;
   padding: 1rem 0.8rem;
   display: flex;
   flex-wrap: wrap;
    .detail_good_box{
      display: flex;
      flex-direction: column;
      .el-checkbox-group{
        display: flex;
      }
      .detail_good_box_img{
        width: 10rem;
        height: 10rem;
        cursor: pointer;
      }
      .detail_good_box_name{
        width: 10rem;
        align-items: center;
        height: 3rem;
        line-height: 3rem;
        text-align: center;
        justify-content: center;
        font-size: .9rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .detail_good_box_price{
        width: 10rem;
        display: flex;
        align-items: center;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        justify-content: center;
        font-size: .9rem;
        color: #f0406f;
        span{
          margin-left: 1rem;
        }
      }
    }
    .consetrbox{
      display: flex;
      margin-bottom: 2rem;
    }
    .topp_body_item{
        display: flex;
      .topp_body_item_body{
        display: flex;
        flex-direction: column;
        .topp_body_img{
          width: 10rem;
          height: 10rem;
          cursor: pointer;
        }
        .topp_body_name{
          width: 10rem;
          align-items: center;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          justify-content: center;
          font-size: .9rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .topp_body_price{
          width: 10rem;
          display: flex;
          align-items: center;
          height: 1rem;
          line-height: 1rem;
          text-align: center;
          justify-content: center;
          font-size: .9rem;
          color: #f0406f;
          span{
            margin-left: 1rem;
          }
        }
      }
    }
    .plus_sign{
      display: flex;
      height: 10rem;
      align-items: center;
      font-size: 3rem;
      width: 8rem;
      justify-content: center;
    }

    .topp_body_item_settlement{
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 10rem;
     height: 10rem;
     align-items: center;
     .topp_body_item_settlement_1{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #999;
     }
     .topp_body_item_settlement_2{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #fb4e7d;
     }
     .topp_body_item_settlement_3{
        display: flex;
        height: 2.5rem;
        align-items: center;
        font-size: 1rem;
        span{
          width: 5rem;
          text-align: center;
          cursor: pointer;
          background:#fb4e7d;
          border-radius: 1rem;
          color: #fff;
          padding: .4rem 1rem;
        }
     }
     .topp_body_item_settlement_4{
       display: flex;
       height: 2.5rem;
       align-items: center;
       font-size: 1rem;
       color: #fff;
       span{
        background: #a9a194;
        padding: .2rem 1rem;
       }
     }
   }
 }
}
</style>
<style>
.el-collapse {
  border-top: 1px solid #d8d8d8;
  border-bottom: 1px solid #d8d8d8;
}
.el-progress-bar{
  width: 35.7rem;
}
.topp_body_price .el-checkbox__label{
  color: #f0406f;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: #f0406f;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f0406f;
  border-color: #f0406f;
}
.el-checkbox__inner:hover{
  border-color: #f0406f;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
  border-color: #f0406f;
}
.el-tabs__item:hover{
  color: #f0406f;
}
.el-tabs__item.is-active{
  color: #f0406f;
}
.el-tabs__header{
  margin-bottom: 0;
}
</style>